<template>
  <section>
    <div class="content-title">{{ title }}</div>
    <div class="tool">
      <div v-for="(x, y) in list" :key="y" @click="showItem(x)">
        <div :class="x.status == 1 ? 'active' : ''">{{ x.title }}</div>
      </div>
      <el-dialog :title="fnName" v-model="isTool" width="920px">
        <component :is="Tool[detail.name]" />
      </el-dialog>
    </div>
  </section>
</template>
<script setup>
import { ref, defineAsyncComponent } from 'vue';
import options from '../../utils/options';
const Tool = {}
const files = import.meta.glob('@/components/tool/*.vue');
for (const key in files) {
  const name = key.split('/').pop()?.replace('.vue', '');
  Tool[name] = defineAsyncComponent(files[key]);
}
const props = defineProps({
  title: {
    type: String,
    defalut: ''
  }
})

const isTool = ref(false)
const detail = ref(null)
const fnName = ref('')
const showItem = (row) => {
  fnName.value = row.title
  isTool.value = true
  detail.value = row
}
const list = options.tools
</script>
<style scoped lang="scss">
.tool {
  display: flex;
  flex-wrap: wrap;

  >div {
    width: 30%;
    height: 50px;
    border: 1px solid #fff;
    margin: 5px;
    padding: 5px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 5px;
  }

  .active {
    color: #14d357;
  }
}
</style>
